<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	response.setHeader("Access-Control-Allow-Origin", "*");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>${webName }·思通投研·让数据驱动投资价值!</title>
<link href="${pageContext.request.contextPath }/img/webLogoIcon.png"
	rel="shortcut icon">
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/font-awesome.css"
	rel="stylesheet">

<link href="${pageContext.request.contextPath }/css/animate.css"
	rel="stylesheet">
<link href="${pageContext.request.contextPath }/css/style.css"
	rel="stylesheet">

<link href="${pageContext.request.contextPath }/css/plugins/chosen/chosen.css" rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/css/plugins/select2/select2.min.css"
	rel="stylesheet">

<!-- FooTable -->
<link href="${pageContext.request.contextPath }/css/footable.core.css"
	rel="stylesheet">

<link href="${pageContext.request.contextPath}/css/mypage.css"
	rel="stylesheet">

<link
	href="${pageContext.request.contextPath}/font-awesome/css/font-awesome.css"
	rel="stylesheet">

<link
	href="${pageContext.request.contextPath}/css/plugins/iCheck/custom.css"
	rel="stylesheet">

<link
	href="${pageContext.request.contextPath}/css/plugins/switchery/switchery.css"
	rel="stylesheet">

<link
	href="${pageContext.request.contextPath}/css/plugins/jasny/jasny-bootstrap.min.css"
	rel="stylesheet">

<link
	href="${pageContext.request.contextPath}/css/plugins/nouslider/jquery.nouislider.css"
	rel="stylesheet">


<link
	href="${pageContext.request.contextPath}/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
	rel="stylesheet">

<link
	href="${pageContext.request.contextPath}/css/plugins/clockpicker/clockpicker.css"
	rel="stylesheet">

<link
	href="${pageContext.request.contextPath}/css/plugins/daterangepicker/daterangepicker-bs3.css"
	rel="stylesheet">


<link
	href="${pageContext.request.contextPath}/css/plugins/touchspin/jquery.bootstrap-touchspin.min.css"
	rel="stylesheet">


<style>
.select2_demo_1 {
	float: left;
	width: 120px;
	display: inline;
	margin-left: 10px;
}

.form-control {
	display: inline;
}

.col-sm-3 {
	float: right;
	width: 560px;
}
.cont{
	line-height:24px;
	color:rgb(150,145,145);
	letter-spacing:0.8px;
	font-family:PingFang SC,Lantinghei SC,Helvetica Neue,Helvetica,Arial,Microsoft YaHei,微软雅黑,STHeitiSC-Light,simsun,宋体,WenQuanYi Zen Hei,WenQuanYi Micro Hei,sans-serif;

}

.input-group {
	float: right;
	width: 240px;
	margin-left: 5px;
}

td {
	vertical-align: middle;
}
#numb{
	font-size:17px;
}
.feel{
	font-size:20px;
	margin-top:-11px;
	margin-bottom:11px;
	font-weight:bold;
	color:#000000;
}
.four .ibox {
	border: 1px solid #e5e6e7;
}
#se{
	padding-right:0px;
	padding-left:10px;
	margin-left:0px;
	float:right;
	width:23.3%;
	text-align:center;
}
.four .ibox-content {
	border-style: none;
	padding: 0px 20px;
}

.main-a {
	padding: 17px 10px 0 10px;
}

.main-a .ibox {
	margin-bottom: 0 !important;
}

.main-b {
	padding: 5px 10px 0 10px;
}

.m-t-sm {
	margin-top: 0;
}

.charts {
	padding: 5px 20px 10px 20px !important;
}
.nali{
	margin-left:50px;
	float:left;
	margin-top:20px;
	font-size: 16px;
	font-weight:550;
}
</style>

</head>

<body>

	<div id="wrapper">

		<nav class="navbar-default navbar-static-side" role="navigation">
		<%-- <%request.setAttribute("LEFT", "information");%> --%> <%@include
			file="left2.jsp"%> </nav>

		<div id="page-wrapper" class="	gray-bg">
			<div class="row border-bottom f-0">
				<jsp:include page="head2.jsp" flush="true" />
			</div>
			<div class="row wrapper border-bottom white-bg page-heading" style="margin-top:20px">
				<div class="col-lg-6">
					<h2>生活数据</h2>
					<ol class="breadcrumb">
						<li class="nav-main1"><a
							href="${pageContext.request.contextPath}/admin/tosystem_overview">主页</a>
						</li>
						<li class="active"><a>${webName }</a></li>
					</ol>
				</div>
				
			</div>

			<div class="wrapper wrapper-content animated fadeInRight main-a">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
							<div class="ibox-content charts" style="background-color:white;">
								<div class="forum-item" style="border-bottom:0">
                                <div class="row">
                                    <div class="col-md-9" style="width:74%">
                                        <div class="forum-icon" style="margin-right:11px;margin-bottom:14px;margin-left:6px">
                                            <i class="fa fa-clock-o" ></i>
                                        </div>
                                        <a href="${pageContext.request.contextPath}/11.jsp" class="forum-item-title">企业数据·统计24小时内数据采集状态</a>
                                        <div class="forum-sub-title" style="margin-left:40px;margin-top:6px">数据采集总量: 17,800,600，更新时间 5分钟前</div>
                                    </div>
                                    
                                    <div class="col-md-1 forum-info">
                                        <div class="feel">
                                            <small style="color:#46D59D">正面</small>
                                        </div>
                                        <span class="views-number" id="numb">
                                            1516
                                        </span>
                                        
                                    </div>
                                    <div class="col-md-1 forum-info" > 
                                         <div class="feel">
                                            <small style="color:#FBBA3A">中性</small>
                                        </div>
                                        <span class="views-number" id="numb">
                                            238
                                        </span>
                                       
                                    </div>
                                    <div class="col-md-1 forum-info">
                                         <div class="feel">
                                            <small style="color:#F73D60">负面</small>
                                        </div>
                                        <span class="views-number" id="numb">
                                            180
                                        </span>
                                       
                                    </div>
                                </div>
                            </div>
								<div class="row" style="padding: 0 30px 0 10px;">
									<div id="container" style="width: 100%; height: 250px;"></div> 
								</div>

							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="wrapper wrapper-content animated fadeInRight main-b"
				style="padding: 0px 10px 0 10px;margin-top:20px">
				<div class="row">
					<div class="col-lg-12">
						<div class="ibox float-e-margins">
						
							<div class="ibox-content">
                            <div class="row" style="font-size: 16px;margin-top: 2%;padding: 0 30px;">
                            	<h3>天气数据</h3>
                            </div>
                            <div class="row" style="font-size: 16px;margin-top: 2%;padding: 0 30px;">
                            	<span>空气质量：</span>
                            	<select id="car-select" onchange="weatherList(1)" style="outline:none;border-radius:4px;padding: 3px 5px;" >
                            		<option value="">全部</option>
                            	</select>
                            </div>
                            <div class="row m-t-sm">
                                <div class="col-lg-12">
                                <div class="panel blank-panel">
                                <div class="panel-heading">
                                    <div class="panel-options">
                                        <ul class="nav nav-tabs">
                                        	<li><span id="dataCount" style="font-size: 15px;margin-right:10px;line-height:30px;">共0条</span></li>
                                            <li class="active"><a href="#tab-1" data-toggle="tab">天气数据</a></li>
                                            <li class="active">
                                            	<div class="select">
                                       				<select class="form-control" id="time" onchange="timeseek(this)">
                                         				<option value="all">全部</option>
								                    	<option value="24h">24小时</option>
								                    	<option value="7d">7天</option>
								                    	<option value="30d">30天</option>
							                    	</select>
										       </div>
						                    </li>
						                    <li style="margin-left:5px;">
						                    	<input id="searchkeyword" placeholder="搜索城市" style="height: 34px;border: 1px solid #e5e6e7;border-radius: 4px;" class="select-text" >
						                    </li>
                    						<li><button class="btn btn-primary" onclick="weatherList(1)">搜索</button></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="panel-body">
                                <div class="tab-content">
                                <div class="tab-pane active" id="tab-1">
                                
                                    <div class="feed-activity-list">
                                    	<table class="table table-bordered">
                                    		<thead>
	                                    		<tr>
	                                    			<th>序号</th>
	                                    			<th>城市</th>
	                                    			<th>温度</th>
	                                    			<th>风向和速度</th>
	                                    			<th>合理温度</th>
	                                    			<th>空气质量</th>
	                                    			<th>预警</th>
	                                    			<th>相对湿度</th>
	                                    			<th>降雨</th>
	                                    			<th>舒适度</th>
	                                    			<th>更新时间</th>
											  	</tr>
                                    		</thead>
                                    		<tbody id="list">
                                    
                                    		</tbody>
										</table>
                                    </div>
                                    <div class="feed-activity-list" id="logs">
                                    	<div class="box" id="box" style="float: right;"></div>
                                    </div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            </div>
                        </div>
						</div>
					</div>
				</div>
			</div>


			<jsp:include page="footer.jsp" flush="true" />
		</div>
	</div>


	<!-- Mainly scripts -->
	<script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
	<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/jquery.metisMenu.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/jquery.slimscroll.min.js"></script>

	<!-- Custom and plugin javascript -->
	<script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
	<script src="${pageContext.request.contextPath }/js/pace.min.js"></script>
	    <script src="${pageContext.request.contextPath }/js/plugins/chosen/chosen.jquery.js"></script>

	<script
		src="${pageContext.request.contextPath }/js/plugins/pace/pace.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/js/plugins/jasny/jasny-bootstrap.min.js"></script>


	<!-- FooTable -->
	<script
		src="${pageContext.request.contextPath }/js/footable.all.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/mypage.js"></script>
	<!-- Sparkline -->
	<script
		src="${pageContext.request.contextPath}/in-admin/js/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/js/anychart-base.min.js"></script>
	<!-- Page-Level Scripts -->
	<script
		src="${pageContext.request.contextPath}/js/plugins/select2/select2.full.min.js"></script>
	<script src="${pageContext.request.contextPath }/js/userCustom.js"></script>
	<script type="text/javascript">
	var navlist = 
		'<li class="nav2active"><a href="#">全国天气</a></li>'
		$("#nav3list").append(navlist)
		$("#nav3list li").click(function(){
		$(this).siblings().removeClass("nav2active")
		$(this).addClass("nav2active")
	}) 
		 
	$(document).ready(function() {
			fourLine();
			line();
			airQualitys(1);
			$('.chosen-select').chosen({
                search_contains: true, //设置全文查询
                disable_search_threshold: 20000 //当下拉列表中的选项<4 时隐藏搜索功能
            });
			var config = {
	                '.chosen-select'           : {},
	                '.chosen-select-deselect'  : {allow_single_deselect:true},
	                '.chosen-select-no-single' : {disable_search_threshold:10},
	                '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
	                '.chosen-select-width'     : {width:"95%"}
	                }
	            for (var selector in config) {
	                $(selector).chosen(config[selector]);
	            }
		}); 

	$(function(){
    	airQualitys()
    	weatherList(1)
	});
    
    var time = ''
        
    function timeseek(obj) {
       	time = $(obj).val()
       	weatherList(1)
		}
    
    function airQualitys(){
    	$.ajax({
    		url : "${pageContext.request.contextPath}/weatherData/airQualitys",
    		type : "post",
    		data:{},
    		async:false,
    		success : function(res) {
    			res = JSON.parse(res);
    			for (var i = 0; i < res.length; i++) {
    				var text = res[i]
    				if (text == "-") {
    					text = "其他"
					}
					var html = '<option value="'+res[i]+'">'+text+'</option>'
				     $('#car-select').append(html)
				}
    		},
    		error: function(err) { console.log(err) }
    	});
    }
    
	function weatherList(pageNum){
		var airQuality = $('#car-select').val()
		var searchkeyword = $('#searchkeyword').val()
    	$.ajax({
    		url : "${pageContext.request.contextPath}/weatherData/weatherList",
    		type : "post",
    		data:{
    			pageNum: pageNum,
    			airQuality: airQuality,
    			time: time,
    			searchkeyword: searchkeyword
    		},
    		success : function(res) {
    			res = JSON.parse(res);
    			$('#dataCount').html('共'+res.totalData+'条')
    			paging(res.totalData, res.totalPage, pageNum)
    			$('#list').html('')
    			var list = res.list
    			for (var i = 0; i < list.length; i++) {
    				var a = list[i].rainfalls;
    				var rainfalls = "";
    				if(a == 0){
    					rainfalls="无雨";
    				}else if(a == 1){
    					rainfalls="小雨";
    				}else if(a == 2){
    					rainfalls="中雨";
    				}else if(a == 3){
    					rainfalls="大雨";
    				}
					var html = '<tr>'
		            				+'<td>'+(i+1)+'</td>'
		            				+'<td><a target="_blank" href="'+list[i].detailUrl+'">'+list[i].city+'</a></td>'
		            				+'<td>'+list[i].air_temperature+'</td>'
		            				+'<td>'+list[i].air_directionAndspeed+'</td>'
		            				+'<td>'+list[i].sensible_temperature+'</td>'
		            				+'<td>'+list[i].air_quality+'</td>'
		            				+'<td style="max-width: 250px;">'+list[i].warning+'</td>'
		            				+'<td>'+list[i].relative_humidity+'</td>'
		            				+'<td>'+rainfalls+'</td>'
		            				+'<td>'+list[i].comfort+'</td>'
		            				+'<td>'+list[i].update_time+'</td>'
						 		+'</tr>'
				     $('#list').append(html);
				}
    			if (list.length == 0) {
    				$('#list').html('<tr><td colspan=10>暂无数据！</td></tr>');
				}
    		},
    		error: function(res) {
    			$('#list').html('<tr><td colspan=10>暂无数据！</td></tr>')
    		}
    	});
    }

		function paging(totalData, totalPage, pagenum) {
			$('#box').paging({
				initPageNo : pagenum, // 初始页码
				totalPages : totalPage, //总页数
				totalCount : '合计' + totalData + '条数据', // 条目总数
				slideSpeed : 600, // 缓动速度 单位毫秒
				jump : true, //是否支持跳转
				callback : function(page) {
					// 回调函数
				}
			});
		}

		function JumpToPage(pagenum) {
			airQualitys(pagenum);
		}

		function fourLine() {
			var sparklineCharts = function() {
				$("#sparkline1").sparkline([ 34, 43, 43, 35, 44, 32, 44, 52 ],
						{
							type : 'line',
							width : '100%',
							height : '60',
							lineColor : '#1ab394',
							fillColor : "#ffffff"
						});

				$("#sparkline2").sparkline([ 24, 43, 43, 55, 44, 62, 44, 72 ],
						{
							type : 'line',
							width : '100%',
							height : '60',
							lineColor : '#1ab394',
							fillColor : "#ffffff"
						});

				$("#sparkline3").sparkline([ 74, 43, 23, 55, 54, 32, 24, 12 ],
						{
							type : 'line',
							width : '100%',
							height : '60',
							lineColor : '#ed5565',
							fillColor : "#ffffff"
						});

				$("#sparkline4").sparkline([ 24, 43, 33, 55, 64, 72, 44, 22 ],
						{
							type : 'line',
							width : '100%',
							height : '60',
							lineColor : '#ed5565',
							fillColor : "#ffffff"
						});
			};
			//        var sparkResize;
			//        $(window).resize(function(e) {
			//            clearTimeout(sparkResize);
			//            sparkResize = setTimeout(sparklineCharts, 500);
			//        });
			sparklineCharts();
		}

		function line() {
			anychart.onDocumentReady(function() {
				var dataSet = anychart.data.set(getData());
				var chart = anychart.line();
				chart.animation(true);
				chart.padding([ 10, 20, 5, 20 ]);
				chart.xAxis().labels().padding(5);
				chart.crosshair().enabled(true).yLabel(false).yStroke(null);
				chart.tooltip().positionMode('point');
				chart.title('统计14天每日数据采集状态走势');
				var seriesData_1 = dataSet.mapAs({
					'x' : 0,
					'value' : 1
				});
				var series_1 = chart.line(seriesData_1);
				series_1.name('日采集数量');
				series_1.hovered().markers().enabled(true).type('circle').size(
						4);
				series_1.tooltip().position('right').anchor('left-center')
						.offsetX(5).offsetY(5);
				chart.legend().enabled(true).fontSize(13).padding(
						[ 0, 0, 10, 0 ]);
				chart.container('container');
				chart.draw();

				$('.anychart-credits').remove()
			});

			function getData() {
				return [ [ '2-10', 17.5 ], [ '2-11', 18.9 ], [ '2-12', 20.8 ],
						[ '2-13', 22.9 ], [ '2-14', 25.2 ], [ '2-15', 27.0 ],
						[ '2-16', 26.5 ], [ '2-17', 25.3 ], [ '2-18', 23.4 ],
						[ '2-19', 19.5 ], [ '2-20', 17.8 ], [ '2-21', 16.2 ],
						[ '2-22', 15.4 ], [ '2-23', 14.0 ], [ '2-24', 12.5 ],
						[ '2-25', 10.8 ], [ '2-26', 8.9 ], [ '2-27', 18.0 ],
						[ '2-28', 6.2 ] ]
			}
		}

		//跑马灯方法
		function init() {
			//获取标题
			var title = document.title;
			//分割字符串--->字符数组
			var arr = title.split("");
			//删除第一个元素并返回该元素
			var e = arr.shift();
			//把一个对象添加到数组末尾
			arr.push(e);
			//把数组转换成字符串
			var marquee = arr.join("");
			//返回给浏览器
			document.title = marquee;
			//定时一直执行
			window.setTimeout("init()", 1000);
		}

		window.onload = init;
	</script>





<!-- 
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
 -->






</body>

</html>
